@import '../matrix-common.scss';
.matrix.side {
    // thead {
    // //     background-color: color(matrix-header);
    // //     color: on-color(matrix-header);
    //     @include adaptive-color-dark-only("background-color", lighten(color(dark-1), 3%));
    // }
    // white-space: nowrap;
    .tactic {
        padding: 2px;
        width: 1%;
        vertical-align: top;
        &.name,
        &.count {
            text-align: center;
            font-size: $sizeunit + 2px;
        }
        &.name {
            cursor: pointer;
            font-weight: bold;
            // height: (($sizeunit + 2) * 3);
            vertical-align: bottom;
            @media print {
                font-size: $sizeunit_print - 4px;
            }
            position: sticky;
            top: 0.05px;
            z-index: 9999;
            @include adaptive-color-dark-only('background-color', lighten(color(dark-1), 3%));
            @include adaptive-color-light-only('background-color', white);
        }
        &.count {
            border-width: 0 0 1px 0;
            border-style: solid;
            font-size: $sizeunit - 1px;
            padding-bottom: 5px;
            margin-bottom: 5px;
            @include adaptive-color('border-color', black, white);
            @media print {
                font-size: $sizeunit_print - 4px;
            }
            position: sticky;
            top: 35px;
            z-index: 9999;
            @include adaptive-color-dark-only('background-color', lighten(color(dark-1), 3%));
            @include adaptive-color-light-only('background-color', white);
        }
        .techniques-table {
            border-collapse: collapse;
            width: 100%;
            tr,
            td {
                padding: 0;
            }
            tr {
                height: 1px;
            }
        }

        .supertechnique {
            border-collapse: collapse;
            width: 100%;
            padding: 0;
            margin: 0;

            td {
                padding: 0;
                vertical-align: top;

                &.technique {
                    // outline: 1px solid on-color-deemphasis(body);
                    // outline-offset: -1px;
                    @include adaptive-color('box-shadow', 0 0 0 1px on-color-deemphasis(body) inset, 0 0 0 1px color(dark-3) inset);
                }
            }
        }
        .subtechniques {
            @include adaptive-color('border-left', 2px solid on-color-deemphasis(body), 2px solid color(dark-3));
            @include adaptive-color('box-shadow', 0 0 0 1px on-color-deemphasis(body) inset, 0 0 0 1px color(dark-3) inset);
            &.hidden {
                display: none;
            }

            // expand to entire height of row if it's smaller than supertechnique
            display: flex;
            flex-direction: column;
            height: 100%;
            margin-left: -1px;
            white-space: nowrap;
            vertical-align: top;

            .subtechnique {
                height: 100%;
                flex-grow: 1;
            }
        }

        .handle {
            @include adaptive-color('color', color-alternate(body), on-color(dark));
            font-family: roboto-regular;
            text-align: center;
            vertical-align: middle;
            transform: rotate(-90deg);
            width: 12px;
            height: 12px;
            font-size: 16px;
            line-height: 12px;
        }
    }
    .sidebar {
        min-width: 8px;
        width: 12px;
        padding: 0;
        cursor: pointer;
        position: relative;
        vertical-align: middle;
        background: on-color-deemphasis(body);
        .angle {
            display: none;
        }
        &.disabled {
            @include adaptive-color('background', #aaaaaa, color(dark-disabled));
            pointer-events: none;
        }
        &.expanded .angle {
            @include adaptive-color('background', color(body), lighten(color(dark-1), 3%));
            height: 12px;
            display: block;
            position: absolute;
            svg {
                fill: on-color-deemphasis(body);
            }
            &.top {
                top: 0;
            }
            &.bottom {
                bottom: 0;
            }
        }
        @media print {
            display: none;
        }
    }
}
